<route>
    {
        meta: {
            title: "上传个人文件"
        }
    }
    </route>

<script setup name="personalExampleUpload">
import useFileStore from '@/store/modules/file'
import { nextTick, ref } from 'vue'
import { ElInput } from 'element-plus'

const route = useRoute()

const router = useRouter()

const fileStore = useFileStore()

const formRef = ref()
const form = ref({
    name: '',
    file: [],
    describe: '',
    labels: '',
    type: '1'
})

const upload = ref()
// 类型
// const radio1 = ref('1')
// 规则
const rules = ref({
    name: [
        { required: true, message: '请输入文件名称', trigger: 'blur' }
    ],
    // file: [
    //     { required: true, message: '请选择文件', trigger: 'blur' }
    // ],
    describe: [
        { required: false, message: '请输入描述', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'blur' }
    ]
})

const inputValue = ref('')

const dynamicTags = ref(['公安', '医院', '学校'])
const inputVisible = ref(false)
const InputRef = ref()

const handleClose = tag => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value.input.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
function onUpLoad(param) {
    const file = param.file
    form.value.file = file
}

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {
            const fileName = form.value.file.name
            const formName = form.value.name
            const newName  = formName + '.' + fileName.substring(fileName.lastIndexOf('.') + 1)

            let newFile = new File([form.value.file], newName)

            // form.value.file.name = newName

            fileStore.updateFile(Object.assign({ parentId: route.query.id, file: newFile })).then(() => {

                ElMessage({
                    type: 'success',
                    message: '上传成功'
                })
                router.go(-1)
            }).catch(() => {})

        }
    })
}
function onCancel() {
    router.go(-1)
}

// 限制只上传一个文件
function  handleChange(file, fileList) {
    if (fileList.length > 1) {
        fileList.splice(0, 1)
    }
}

</script>

<template>
    <div>
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="文件名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入文件名称" />
                        </el-form-item>
                        <!-- <el-form-item>
                            <Editor />
                        </el-form-item> -->
                        <el-form-item label="选择文件" prop="file">
                            <file-upload
                                ref="upload"
                                v-model="form.file"
                                action=""
                                :http-request="onUpLoad"
                                :limit="1"
                                :on-change="handleChange"
                            />
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">上传</el-button>
            <el-button type="primary" size="large" @click="onCancel">取消</el-button>
        </fixed-action-bar>
    </div>
</template>
